// ANIMATIONS
// ---------------------------------------------------------------

@-moz-keyframes spinPulse {
  0% {
    -moz-transform: rotate(-10deg);
    opacity: 0.5;
  }

  25% {
    -moz-transform: rotate(125deg);
    opacity: 1;
  }


  100% {
    -moz-transform: rotate(350deg);
    opacity: 0.5;
  }

;
}


@-webkit-keyframes spinPulse {
  0% {
    -webkit-transform: rotate(-10deg);
    opacity: .5;
  }

  25% {
    -webkit-transform: rotate(125deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: rotate(350deg);
    opacity: .5;
  }

;
}

.rt-loading-message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 350px;
}

.rt-loading-message-inside {
  text-align: center;
  padding-top: 90px;
  min-height: 150px;
  min-width: 400px;
  margin: 0 auto;
}

.rt-loading-pulse {
  opacity: 0;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;

  -webkit-animation: loading-opacity 200ms 500ms ease-in forwards; /* Safari 4+ */
  -moz-animation: loading-opacity 200ms 500ms ease-in forwards; /* Fx 5+ */
  -o-animation: loading-opacity 200ms 500ms ease-in forwards; /* Opera 12+ */
  animation: loading-opacity 200ms 500ms ease-in forwards; /* IE 10+, Fx 29+ */
}

.rt-loading-msg {
  opacity: 0;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  color: $gray-2;
  text-transform: uppercase;
  font-weight: 400;
}

.rt-loading-msg-1 {
  @extend .rt-loading-msg;
  animation: loading-opacity 200ms 500ms ease-in forwards, loading-clear 200ms 5s ease-in forwards;
}

.rt-loading-msg-2 {
  @extend .rt-loading-msg;
  top: -35px;
  animation: loading-opacity 200ms 5.5s ease-in forwards, loading-clear 200ms 15s ease-in forwards;
}

.rt-loading-msg-3 {
  @extend .rt-loading-msg;
  top: -70px;
  animation: loading-opacity 200ms 15.5s ease-in forwards;
}

@-webkit-keyframes loading-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes loading-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes loading-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes loading-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes loading-clear {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes loading-clear {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes loading-clear {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes loading-clear {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.ascii-spinner-layout {
  opacity: 0;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-top: -20px;
  left: 0;
  right: 0;
}

.ascii-spinner-container {
  position: relative;
  display: inline-block;
}

.ascii-spinner-1 {
  @extend .ascii-spinner-layout;
  animation: loading-1 2250ms ease-in infinite;
  -webkit-animation: loading-1 2250ms ease-in infinite;
  -moz-animation: loading-1 2250ms ease-in infinite;
  -o-animation: loading-1 2250ms ease-in infinite;
}

.ascii-spinner-2 {
  @extend .ascii-spinner-layout;
  -webkit-animation: loading-2 2250ms ease-in infinite;
  -moz-animation: loading-2 2250ms ease-in infinite;
  -o-animation: loading-2 2250ms ease-in infinite;
  animation: loading-2 2250ms ease-in infinite;
}

.ascii-spinner-3 {
  @extend .ascii-spinner-layout;
  -webkit-animation: loading-3 2250ms ease-in infinite;
  -moz-animation: loading-3 2250ms ease-in infinite;
  -o-animation: loading-3 2250ms ease-in infinite;
  animation: loading-3 2250ms ease-in infinite;
}


@-webkit-keyframes loading-1 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: .5;
  }
  11% {
    opacity: .5;
  }
  12% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes loading-1 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: .5;
  }
  11% {
    opacity: .5;
  }
  12% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes loading-1 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: .5;
  }
  11% {
    opacity: .5;
  }
  12% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes loading-1 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: .5;
  }
  11% {
    opacity: .5;
  }
  12% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes loading-2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: .5;
  }
  22% {
    opacity: .5;
  }
  23% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes loading-2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: .5;
  }
  22% {
    opacity: .5;
  }
  23% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes loading-2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: .5;
  }
  22% {
    opacity: .5;
  }
  23% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes loading-2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: .5;
  }
  22% {
    opacity: .5;
  }
  23% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes loading-3 {
  0% {
    opacity: 0;
  }
  21% {
    opacity: 0;
  }
  22% {
    opacity: .5;
  }
  33% {
    opacity: .5;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes loading-3 {
  0% {
    opacity: 0;
  }
  21% {
    opacity: 0;
  }
  22% {
    opacity: .5;
  }
  33% {
    opacity: .5;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes loading-3 {
  0% {
    opacity: 0;
  }
  21% {
    opacity: 0;
  }
  22% {
    opacity: .5;
  }
  33% {
    opacity: .5;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes loading-3 {
  0% {
    opacity: 0;
  }
  21% {
    opacity: 0;
  }
  22% {
    opacity: .5;
  }
  33% {
    opacity: .5;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
